<template>
    <div class="layout-flex">
        <div class="tabheader">
            <el-tabs v-model="state.activeName" class="shipping-tabs" @tab-change="changeTabs">
                <el-tab-pane label="全部" name="first">
                </el-tab-pane>
                <el-tab-pane :label="`${i.statusName} ${i.itemCount ? `(${i.itemCount})` : ''}`" :name="i.statusCode"
                    v-for="i in state.statusInfo"></el-tab-pane>
            </el-tabs>
        </div>

        <FastFilter @search="searchList" @reset="resetList">
            <template v-slot:leftFilters>
                <ComboSearch :options="moreSearch" :prefixSelect="'sourceCode'"
                    @search="handleComboSearch($event, 'searchDto')" @searchMore="searchList" ref="comboSearchRef"
                    style="width: 320px">
                </ComboSearch>
                <ComboSearch :options="moreSearch2" :prefixSelect="'skuCode'"
                    @search="handleComboSearch($event, 'searchDtoOne')" @searchMore="searchList" ref="comboSearchRef2"
                    style="width: 320px">

                </ComboSearch>
                <WareSelect @change="handleSearch($event, 'wFromList')" v-model="state.queryForm.whIdFromList" title="发货仓库"
                    mode="1" class="w180" />
                <WareSelect @change="handleSearch($event, 'wTargetList')" v-model="state.queryForm.whIdToList" title="目的仓库"
                    mode="2" class="w180" />

                <date-picker-with-prefix :options="datePickerOptions" ref="datePickerRef" @change="changeDataRange" />

            </template>
            <template #result>
                <FilterTag v-for="(item, index) in FilterTagOption" :key="index" :show="item.key()" :label="item.label()"
                    :value="item.value()" @close="closeTag(item.clear)" />
            </template>
        </FastFilter>
        <div class="layout-padding">
            <FastTableHandle @queryTable="searchList(false)">
                <template v-slot:leftBtns>
                    <div>
                       
                        <el-button type="primary" v-if="state.activeName == '0'" @click="mergeDialog">
                            合并
                        </el-button>
                        <el-button @click="bindItems" v-if="state.activeName == '0'">
                            手动绑定
                        </el-button>
                        <el-button @click="refreshItems" v-if="state.activeName == '2' || state.activeName == '1'">
                            刷新三方仓状态
                        </el-button>
                        <el-button type="primary" @click="exportByType">
                            导出
                        </el-button>
                    </div>
                </template>
                <template v-slot:rightWrapper>
                    <el-icon>
                        <Setting @click="columnsSettingRef.openDialog()" />
                    </el-icon>
                    <el-button class="ml10" @click="setModel('2')">
                        单据
                    </el-button>
                    <el-button class="ml10" @click="setModel('1')">
                        产品
                    </el-button>
                    <el-button class="ml10" @click="state.expand = !state.expand">
                        收起父行
                    </el-button>
                </template>
            </FastTableHandle>
            <div class="layout-flex" v-if="state.tableModel == '1'">
                <table-layout :fetch-list="fetchListPC" :data="state.dataList" :span-method="arraySpanMethod" row-key="id"
                    :query-form="state.queryForm" :row-class-name="tableRowClassName" ref="tableRef"
                    @selection-change="handleSelectionChange" :asyncHandle="handleDataChange" @row-click="clickRow"
                    default-expand-all>
                    <template v-slot:tableLayout>
                        <el-table-column label="" width="1" fixed="left" />
                        <el-table-column type="selection" width="40" fixed="left">
                            <template #default="{ row }">
                                <span v-if="!row.childrenSize"></span>
                            </template>
                        </el-table-column>
                        <el-table-column width="1" fixed="left">
                            <template #default="{ row, $index }">
                                <div v-if="row.childrenSize" class="headerLine">
                                    <div>
                                        <div>
                                            <el-button link type="primary">{{ row.inboundOrderCode }}</el-button>
                                            <SvgIcon name="ele-CopyDocument" :size="12" class="copy_btn show_hover ml5"
                                                @click="copyText(row.inboundOrderCode)" />
                                            <el-tag v-if="row.orderMergeType == '2'">合</el-tag>
                                        </div>
                                        <Tc>发货仓库：{{ row.whNameFrom || '-' }}
                                        </Tc>
                                        <Tc>收货仓库：{{ row.whNameTo || '-' }}
                                        </Tc>
                                        <div>运输方式：{{ row.shippingMethodName || '-' }}</div>
                                        <Tc>来源单号：{{ row.sourceCode || '-' }} </Tc>
                                        <div>跟踪号：{{ row.logisticsTraceCode || '-' }} </div>
                                        <Tc>创建人/时间：{{ row.createBy || '-' }}/{{ row.createTime || '-' }}</Tc>
                                    </div>
                                    <div v-if="state.expand">
                                        <div>
                                            <el-tag :type="approveStatusTagType[row.statusCode || '0'].type">{{
                                                approveStatusTagType[row.statusCode || '0'].label ||
                                                '-' }}</el-tag>
                                        </div>
                                        <div>三方仓服务商：{{ row.tripartiteProviderName || '-' }}</div>
                                        <div>三方仓单号：{{ row.tripartiteOrderCode || '-' }}</div>
                                        <div>三方仓入库类型：{{ whTypeToList[row.whTypeTo] || '-' }}</div>
                                        <div>发货数：{{ row.deliveryNumTotal || '-' }} </div>
                                        <div>已入库数：{{ row.receivedNumTotal || '-' }}</div>
                                        <div>下载失败原因：{{ row.orderErrMsg }}</div>
                                    </div>
                                    <div>
                                        <div></div>
                                        <div>到仓日期：{{ row.actualExitTime || '-' }}</div>
                                        <div class="flex">备注：
                                            <div v-if="row.edit">
                                                <el-input v-model="row.remark" @blur="submitRemarkPlan(row)"></el-input>
                                            </div>
                                            <div class="flex" v-else>
                                                <div class="remarktext">
                                                    {{ row.remark || '-' }}
                                                </div>
                                                <el-button link type="primary" @click="row.edit = true">
                                                    <el-icon>
                                                        <Edit />
                                                    </el-icon>
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div v-if="row.isMore" style="text-align: left;padding-left: 20px;">
                                    <el-button link type="primary">展示剩余{{ row.lay }}条<el-icon>
                                            <ArrowDown />
                                        </el-icon></el-button>
                                </div> -->
                            </template>
                        </el-table-column>
                        <el-table-column v-for="col in columnsData['prodList']" :label="col.name"
                            :prop="col.prop || 'picUrl'" :fixed="col.fixed ? col.fixed : false"
                            :min-width="col.width ? col.width : '140'" :sortable="col.sortable" show-overflow-tooltip>
                            <template #default="{ row, $index }" v-if="col.name == '图片'">
                                <div class="list-image">
                                    <ewt-image :url="row.picUrl" @click="showImageView(row.picUrl)"
                                        style="width: 36px; height: 36px; object-fit: contain; display: block" />
                                    <div class="tag-combination" v-if="row.skuType === '2'">组</div>
                                </div>
                            </template>
                            <template #default="{ row }" v-if="col.name == 'MSKU/FNSKU'">
                                <div style="width: 140px">
                                    <p>{{ row.msku || '-' }}
                                        <SvgIcon name="ele-CopyDocument" :size="12" class="copy_btn show_hover ml5"
                                            @click="copyText(row.msku)" />
                                    </p>
                                    <p>{{ row.fnsku || '-' }}</p>

                                </div>
                            </template>
                            <template #default="{ row }" v-if="col.name == '品名/SKU'">
                                <NameAndSku :data="row" :dialogRef="SkuDetailDialogRef" />
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <div style="display: flex" v-if="row.showSize">
                                    <el-button link type="primary"
                                        @click="router.push(`/warehouse/third/inboundOrder/detail/detail/${row.id}`)">
                                        详情
                                    </el-button>
                                    <el-dropdown v-if="row.statusCode != 5">
                                        <el-button link type="primary" class="el-dropdown-link ml5">
                                            操作
                                            <el-icon class="el-icon--right">
                                                <arrow-down />
                                            </el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item v-if="row.statusCode == 0"
                                                    @click="orderById(row.id)">
                                                    <div>下单</div>
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    @click="refuseOrder(row)"
                                                    v-if="row.statusCode == 1">
                                                    <div>取消下单</div>
                                                </el-dropdown-item>
                                                <el-dropdown-item @click="$log({id: row.id})">
                                                    <div>日志</div>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </table-layout>
            </div>
            <div class="layout-flex" v-if="state.tableModel == '2'">
                <table-layout :fetch-list="fetchListPC" :data="state.dataList" row-key="id" :query-form="state.queryForm"
                    ref="tableRef" @selection-change="handleSelectionChange" :asyncHandle="handleDataChange"
                    @row-click="clickRow">
                    <template v-slot:tableLayout>
                        <el-table-column label="" width="1" fixed="left" />
                        <el-table-column type="selection" width="40" fixed="left">
                            <template #default="{ row }">
                                <span v-if="!row.childrenSize"></span>
                            </template>
                        </el-table-column>
                        <el-table-column v-for="col in columnsData['orderList']" :label="col.name"
                            :prop="col.prop || 'picUrl'" :fixed="col.fixed ? col.fixed : false"
                            :min-width="col.width ? col.width : '140'" :sortable="col.sortable" show-overflow-tooltip>
                            <template #default="{ row }" v-if="col.name == '单据状态'">
                                <div style="width: 140px">
                                    <el-tag :type="approveStatusTagType[row.statusCode || '0'].type">{{
                                        approveStatusTagType[row.statusCode || '0'].label ||
                                        '-' }}</el-tag>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <div style="display: flex" v-if="row.showSize">
                                    <el-button link type="primary"
                                        @click="router.push(`/warehouse/third/inboundOrder/detail/${row.id}`)">
                                        详情
                                    </el-button>
                                    <el-dropdown v-if="row.statusCode != 5">
                                        <el-button link type="primary" class="el-dropdown-link ml5">
                                            操作
                                            <el-icon class="el-icon--right">
                                                <arrow-down />
                                            </el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item v-if="row.statusCode == 0"
                                                    @click="orderById(row.id)">
                                                    <div>下单</div>
                                                </el-dropdown-item>
                                                <el-dropdown-item
                                                    @click="refuseOrder(row)"
                                                    v-if="row.statusCode == 1">
                                                    <div>取消下单</div>
                                                </el-dropdown-item>
                                                <el-dropdown-item @click="$log({id: row.id})">
                                                    <div>日志</div>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </table-layout>
            </div>
        </div>
        <ewt-image-viewer v-if="state.imageViewer" :url-list="[state.imageViewer]" @close="closeViewer" />
        <MergeOrder ref="mergeOrderRef" @change="searchList(true)" />
        <OrderByIdDialog ref="orderRef" @change="searchList(true)" />
        <BindBack ref="bindBackRef" @change="searchList(true)" />

        <SkuDetailDialog ref="SkuDetailDialogRef" />
        <ColumnsSetting ref="columnsSettingRef" @changeColumn="changeColumn"
            :allList="columns[state.tableModel == '1' ? 'prodList' : 'orderList']"
            :commitName="loacalName[state.tableModel == '1' ? 'prodList' : 'orderList']"
            :list="columnsData[[state.tableModel == '1' ? 'prodList' : 'orderList']]" />
    </div>
</template>

<script lang="ts" setup name="shippingDoc">

import { onMounted, reactive } from 'vue';
import { Local } from '/@/utils/storage';
const MergeOrder = defineAsyncComponent(() => import('./components/mergeOrder/index.vue'));
const OrderByIdDialog = defineAsyncComponent(() => import('./components/orderById/index.vue'));
const BindBack = defineAsyncComponent(() => import('./components/bindBack/index.vue'));
import { moreSearch, moreSearch2, approveStatusTagType } from './option.json'
import { ElMessage } from 'element-plus';


const SkuDetailDialogRef = ref()

const whTypeToList = {
    2: '自营仓',
    3: '三方仓',
    4: '平台仓',
}

import request from '/@/utils/request';


const fetchListPC = (data?: object) => {
    const { current, size, ascs, descs, groupBy } = data;

    const params = { current, size, ascs, descs };


    return request({
        url: '/wms/tripartiteInboundOrder/multiQuery',
        method: 'POST',
        data,
        params
    });
}

const listStatusInfo = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/listStatusInfo',
        method: 'POST',
        data,
    });
}

const updateRemarkById = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/updateRemarkById',
        method: 'PUT',
        data,
    });
}


// 导出单据
const exportDeliveryOrder = (data: any) => {
    return request({
        url: '/wms/tripartiteInboundOrder/exportTripartiteInboundStart',
        method: 'post',
        data,
    });
}

const refreshStatus = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/refreshStatus',
        method: 'post',
        data
    });
}

const FilterTagOption = [
    {
        key: () => state.queryForm.whIdToList.length,
        label: () => '发货仓库',
        value: () => state.wFromList.map((item) => item.nodeName),
        clear: () => {
            state.queryForm.whIdToList = [];
        },
    },
    {
        key: () => state.queryForm.whIdToList.length,
        label: () => '目的仓库',
        value: () => state.wTargetList.map((item) => item.nodeName),
        clear: () => {
            state.queryForm.whIdToList = [];
        },
    },
];

const setModel = (t) => {
    state.tableModel = t
}

const closeTag = (claar) => {
    claar();
    searchList();
};

const router = useRouter();

import CommonFunction from '/@/utils/commonFunction';

const { copyText } = CommonFunction();


const columnsSettingRef = ref();
const tableRef = ref()


import { columns } from './components/columnsSetting/columns.js'
import { useMessage } from '/@/hooks/message';

const loacalName = {
    prodList: 'prodList',
    orderList: 'orderList',
};
const columnsData = reactive({
    prodList: Local.get(loacalName.prodList) || columns.prodList,
    orderList: Local.get(loacalName.orderList) || columns.orderList,
});

const changeColumn = (list, name) => {
    if (name == 'prodList') {
        columnsData.prodList = list;
    }
    if (name == 'orderList') {
        columnsData.orderList = list;
    }
};

const tableRowClassName = ({
    row,
    rowIndex,
}) => {
    if (row.childrenSize) {
        return 'rowHeader'
    } else if (row.isMore) {
        return 'rowLeft'
    }
    return ''
}

const arraySpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}) => {
    if (row.showSize) {
        if (columnIndex == 2) {
            // return [1, 1]
            return [1, columnsData['prodList'].length + 1]
        } else if (columnIndex == 0 || columnIndex == 1 || columnIndex == columnsData['prodList'].length + 3) {
            return [1, 1]
        } else {
            return [1, 0]
        }
    } else if (row.isMore) {

        if (columnIndex == 2) {
            return [1, 1]
            // return [1, columnsData.prodList.length + 3]

        } else {
            return [0, 0]
        }
    } else if (!row.isShow) {
        return [0, 0]
    } else {
        if (columnIndex == 20) {
            return [1, 1]
        }
    }
}

// 内部分页大小
const len = 100

const handleDataChange = (data) => {
    state.dataList = data.map(item => {
        item.childrenSize = item.children.length
        if (!item.showSize) {
            item.showSize = item.childrenSize < len ? item.childrenSize : len
        } else if (item.showSize < item.childrenSize) {
            item.showSize = item.showSize + (item.childrenSize - item.showSize > len ? len : item.childrenSize - item.showSize)
        }
        item.children = item.children.map((i, index) => {
            i.isShow = index < item.showSize
            return i
        })
        if (item.childrenSize > item.showSize) {
            item.children.push({ isMore: true, pid: item.id, lay: item.childrenSize - item.showSize })
        }
        return item
    })
}

const clickRow = (rowData, b, c, d) => {
    if (rowData.isMore) {
        state.dataList = state.dataList.map(item => {
            if (item.id == rowData.pid) {
                if (item.showSize < item.childrenSize) {
                    item.showSize = item.showSize + (item.childrenSize - item.showSize > len ? len : item.childrenSize - item.showSize)
                }
                item.children = item.children.map((i, index) => {
                    i.isShow = index < item.showSize
                    if (i.isMore) {
                        i.lay = item.childrenSize - item.showSize
                    }
                    return i
                })

                if (item.childrenSize <= item.showSize) {
                    item.children = item.children.splice(0, item.children.length - 1)
                }
            }

            return item
        })
    }
}

// 筛选相关
const searchList = (refresh = true) => {
    tableRef.value?.refresh(refresh);
    fetchListStatusInfo()
};

// 状态栏数据搜索
const fetchListStatusInfo = () => {
    listStatusInfo({}).then(res => {
        if (res.code == 0) {
            state.statusInfo = res.data
        }
    })
}

const resetQueryForm = () => {
    Object.keys(obj).forEach((i) => {
        state.queryForm[i] = obj[i];
    });

};

const resetList = () => {
    resetQueryForm()
    searchList()
}

const handleSearch = (data, type) => {
    const { ids, list } = data
    filterTags[type] = list

    // 联动
    if (type == 'companyList') {
        state.queryForm.teamIdList = []
    }
    searchList()
};

const handleComboSearch = (ids, type) => {
    state.queryForm[type] = {};
    const { key, like, value } = ids;
    state.queryForm[type].searchFieldId = key;
    state.queryForm[type].searchValue = like;
    state.queryForm[type].searchValueList = value;
    state.queryForm[type].searchMode = value.length ? 'mode_in' : 'mode_like';

    searchList();
};

const checkedNumberRef = ref(0);

const handleSelectionChange = (val) => {
    checkedNumberRef.value = val.length
};

const getSelectionRows = () => {
    const rows = tableRef?.value?.tableRef?.getSelectionRows() || []
    if (rows.length == 0) {
        return null
    }
    return rows
}

const showImageView = (img) => {
    state.imageViewer = img;
};
const closeViewer = () => {
    state.imageViewer = '';
};

const obj = {
    statusCode: '',
    whIdToList: [],
    channelIdList: [],
    timeType: '1',
    dateFrom: '',
    dateTo: '',
    groupBy: '1',
}

const state = reactive({
    tableModel: '1',
    expand: true,
    imageViewer: '',
    activeName: 'first',
    queryForm: Object.assign({}, obj),
    companyList: [],
    channel: [],
    dataList: [],
    statusInfo: [],
    wFromList: [],
    wTargetList: [],
})

const filterTags = reactive({
    wFromList: [],
    wTargetList: [],
})

const datePickerOptions = computed(() => {
    return [
        { label: '预计入库时间', value: 1 },
        { label: '创建时间', value: 2 },
    ];
})

const submitRemarkPlan = async (row) => {
    const res = await updateRemarkById({
        id: row.id,
        remark: row.remark
    })

    if (res.code == 0) {
        row.edit = false
    }
}

const exportByType = () => {
    const rows = getSelectionRows()
    const ids = rows?.map(i => i.id)
    exportDeliveryOrder({ query: state.queryForm, ids })
        .then(() => {
            ElMessage({
                message: '单据下载成功，请至【下载中心】下载查看',
                type: 'success',
            });
        })
        .catch((res) => {
            ElMessage({
                message: res.data,
                type: 'error',
            });
        });
}

const changeDataRange = (val: unknown, v2: string[]) => {
    state.queryForm.timeType = val
    if (val == 1) {
        state.queryForm.expectedInDateFrom = v2[0]
        state.queryForm.expectedInDateTo = v2[1]
    } else {
        state.queryForm.createDateFrom = v2[0]
        state.queryForm.createDateTo = v2[1]
    }

    searchList();
};

const changeTabs = (e) => {
    if (e == 'first') {
        state.queryForm.statusCode = ''
    } else {
        state.queryForm.statusCode = e
    }
    searchList()
}

const bindBackRef = ref()

const bindItems = () => {
    const rows = (getSelectionRows() || []).filter(i => i.children)

    if (!rows || rows.length == 0) {
        useMessage().error('请先选择一条数据')

        return false
    }
    if (rows.length > 0) {
        // 公司主体 团队 备货区域 发货仓 目的仓
        const compareData = rows[0]
        let flag = true
        if (rows.length > 1) {
            flag = !rows.some(item => {
                if (item.tripartiteProviderCode != compareData.tripartiteProviderCode) {
                    useMessage().error(`请选择具有相同三方仓服务商的单据`)
                    return true
                }
                if (item.whCodeTo != compareData.whCodeTo) {
                    useMessage().error(`请选择具有相同收货仓的单据`)
                    return true
                }
            })
        }
        if (flag) {
            
            let arr = []
            rows.forEach(i => {
                arr = arr.concat(i.children)
            });
            const obj = {
                whNameTo: rows[0].whNameTo,
                inboundOrderCodes: rows.map(i => i.inboundOrderCode).join(','),
                rows: arr,
                idList: rows.map(i => i.id)
            }
            bindBackRef?.value?.openDialog(obj)
        }
    }
}


const refreshItems = () => {
    const rows = getSelectionRows()
    if (!rows) {
        useMessage().error('请先选择一条数据')

        return false
    }
    if (rows.length > 0) {
        let params = (getSelectionRows() || []).filter(i => i.children).map(item => item.id)
        refreshStatus(params).then(res => {
            if (res.code == 0) {
                useMessage().success('刷新成功')
                searchList()
            } else {
                useMessage().error(res.msg)
            }
        })
    }
}

import { useMessage, useMessageBox } from '/@/hooks/message';

const mergeOrderRef = ref()

const mergeDialog = () => {
    const rows = (getSelectionRows() || []).filter(i => i.children)

    if (!rows || rows.length == 0) {
        useMessage().error('请先选择一条数据')

        return false
    }
    if (rows.length > 0) {
        // 公司主体 团队 备货区域 发货仓 目的仓
        const compareData = rows[0]
        let flag = true
        if (rows.length > 1) {
            flag = !rows.some(item => {
                if (item.tripartiteProviderCode != compareData.tripartiteProviderCode) {
                    useMessage().error(`请选择具有相同三方仓服务商的单据`)
                    return true
                }
                if (item.whCodeTo != compareData.whCodeTo) {
                    useMessage().error(`请选择具有相同收货仓的单据`)
                    return true
                }

                if (item.whNameFrom != compareData.whNameFrom) {
                    useMessage().error(`请选择具有相同发货仓的单据`)
                    return true
                }                
            })
        }
        if (flag) {
            mergeOrderRef?.value?.openDialog(rows)
        }
    }

}

const cancelInbound = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/cancelInbound',
        method: 'post',
        params: data
    });
}

const refuseOrder = async(data) => {
    const res = await cancelInbound({id: data.id})
    if (res.code == 0) {
        useMessage().success(`已成功取消`)
        searchList()
    }
}

const orderRef = ref()

const orderById = async(ids) => {
    orderRef?.value?.openDialog(ids)
    // const res = await callOrder(ids)
    // if (res.code == 0) {
    //     useMessage().success(`已成功下单`)
    //     searchList()
    // }
}



onMounted(async () => {
    fetchListStatusInfo()
})



</script>

<style lang="scss">
.tabheader {
    padding: 0 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #efefef;
}

.shipping-tabs {

    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-tabs__nav-wrap {
        &::after {
            background-color: transparent;
        }
    }
}



.rowLeft {

    .cell {
        overflow: inherit;
        // width: 3000px;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }

    >td {
        padding: 0 !important;
        left: 0 !important;
        border-bottom: 0 !important;
        background-color: #fff !important;
    }

}
</style>

<style lang="scss" scoped>
.headerLine {

    >div {
        display: flex;

        >div {
            margin-right: 30px;
            display: flex;
            align-items: center;
            height: 32px;

            &:nth-child(1) {
                width: 120px;
            }

            &:nth-child(2) {
                width: 200px;
            }

            &:nth-child(3) {
                width: 240px;
            }

            &:nth-child(4) {
                width: 180px;
            }

            &:nth-child(5) {
                width: 200px;
            }

            &:nth-child(6) {
                width: 140px;
            }
        }
    }

}

.list-image {
    display: flex;

    img {
        border: 1px solid #eee;
    }
}

.w180 {
    width: 180px;
}

.remarktext {
    width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>